<template>
	<view id="app">
		<view class="top">
			<view>
				<text>发布失物招领</text>
			</view>
			<view>
				<button id="releaseBtn" @click="release">发布</button>
			</view>
		</view>
		<view class="main">
			<view class="inpView">
				<input id="titleInp" focus placeholder="输入标题..." v-model="info.last_found_title" />
			</view>
			<view class="textAreaView">
				<textarea placeholder-class="textArea" v-model="info.last_found_withtitle" placeholder="输入内容..." />
			</view>
			<view class="">
				<robby-image-upload :value="info.imgs_url" :server-url="serverUrl" :enable-drag="enableDrag"
					:limit="limitNumber" :form-data="formData" @add="upload" @delete="deleteImg" fileKeyName="file">
				</robby-image-upload>
			</view>
		</view>
	</view>
</template>

<script>
	import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue'
	export default {
		components: { robbyImageUpload },
		data() {
			return {
				serverUrl: 'http://172.17.26.211:3334/uploadFile',
				limitNumber: 8,
				info: {
					last_found_title: '',
					last_found_withtitle: '',
					imgs_url: []
				}
			}
		},
		methods: {
			//图片上传
			upload(e) {
				let { data } = JSON.parse(e.allImages[e.allImages.length - 1]);
				this.info.imgs_url.push(data)
			},
			deleteImg(e) {
				this.info.imgs_url.splice(e.allImages.length, 1)
			},
			//时间转换
			format(value) {
				let date = new Date(value);
				let y=date.getFullYear();
				let m=date.getMonth()+1;
				let d=date.getDate();
				let hour = date.getHours();
				let minutes = date.getMinutes();
				let second = date.getSeconds();
				return y+'-'+m+'-'+d+' '+(hour < 10 ? '0' + hour : hour) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (second <
					10 ? '0' + second : second);
			},
			//发布失物招领
			async release() {
				const newDate = this.format(Date.parse(new Date()));
				const { id } = uni.getStorageSync('myInfo')
				const { data: res } = await this.$http({
					url: '/lastfound/addLastFound',
					data: {
						create_time: newDate,
						imgs_url: this.info.imgs_url[0],
						last_found_title: this.info.last_found_title,
						last_found_withtitle: this.info.last_found_withtitle,
						wx_user_id: id + ''
					}
				})

				console.log(res);
			}
		}
	}
</script>

<style lang="less">
	#app {
		padding: 20rpx 30rpx 0rpx 30rpx;

		.top {
			display: flex;
			justify-content: space-between;

			text {
				font-size: 42rpx;
			}

			#releaseBtn {
				height: 60rpx;
				width: 130rpx;
				font-size: 30rpx;
				line-height: 60rpx;
				background-color: #f9cc66;
				color: #252525;
				border-radius: 50rpx;
			}

		}

		.main {

			.inpView {
				border-bottom: 1rpx solid #ebebeb;
				margin-bottom: 57rpx;
				height: 90rpx;

				#titleInp {
					margin-top: 25rpx;
					font-size: 37rpx;
					height: 78rpx;
					width: 690rpx;
					font-weight: 300
				}
			}

			.textAreaView {}
		}

		.textArea {
			font-size: 30rpx;
			font-weight: 300;
		}
	}
</style>
